<template>
  <div class="h-full subjectAll-box">
    <base-page v-bind="baseInfo">
      <template #searchBar>
        <filter-form ref="filterForm" :elements="elements" :show-reset="true" @submit="submit">
          <template>
            <el-button v-waves class="ck-button" type="primary" icon="el-icon-plus" @click="drawerAdd">新增</el-button>
            <el-button icon="el-icon-upload" @click="download">下载模板</el-button>
            <el-upload
              ref="upload"
              action=""
              :show-file-list="false"
              name="file"
              accept=".xls, .xlsx, .XLS, .XLSX"
              class="upload-demo"
              :http-request="uploadChange"
              :on-success="handleSuccess"
              :on-change="handleChange"
            >
              <el-button icon="el-icon-upload2">导入</el-button>
            </el-upload>
            <el-button icon="el-icon-download" @click="exportList">导出</el-button>
          </template>
        </filter-form>
      </template>
      <template #content>
        <div class="table-box">
          <TableNew
            :loading="tableLoading"
            :data="tableData"
            :columns="tableEl"
            :pagination="pagination"
            @paginationChange="paginationChange"
          >
            <template #status="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="true"
                :inactive-value="false"
                @change="operating(scope.row)"
              />
            </template>
            <template #manageStatus="scope">
              <el-switch
                v-model="scope.row.manageStatus"
                :active-value="true"
                :inactive-value="false"
                @change="budget(scope.row)"
              />
            </template>
            <template #action="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
                :open-delay="600"
              >
                <i
                  class="el-icon-edit-outline action"
                  @click="editFun(scope.row)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
                :open-delay="600"
              >
                <i
                  class="el-icon-delete action red"
                  @click="removeFun(scope.row)"
                />
              </el-tooltip>
            </template>
          </TableNew>
        </div>
      </template>
    </base-page>
    <Drawer
      :visible="drawerVisible"
      :title="[isEdit ? '添加' : '编辑'] + '部门'"
      width="35%"
      :footer-btns="footerBtns"
      @submit="drawerSubmit"
      @cancel="drawerCancel"
    >
      <template>
        <el-form ref="drawerForm" :model="drawerForm" size="mini" :rules="drawerRules" label-width="140px" class="mx-15 mt-10">
          <el-form-item label="部门名称" prop="departmentName">
            <el-input v-model="drawerForm.departmentName" placeholder="请输入部门名称" />
          </el-form-item>
          <el-form-item label="部门编码" prop="departmentCode">
            <el-input v-model="drawerForm.departmentCode" placeholder="请输入部门编码" />
          </el-form-item>
          <el-form-item label="是否参与业务预算" prop="status">
            <el-switch
              v-model="drawerForm.status"
              :active-value="true"
              :inactive-value="false"
            />
          </el-form-item>
          <el-form-item label="是否参与管理预算" prop="manageStatus">
            <el-switch
              v-model="drawerForm.manageStatus"
              :active-value="true"
              :inactive-value="false"
            />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="drawerForm.remark"
              type="textarea"
              placeholder="请输入备注"
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </template>
    </Drawer>
  </div>
</template>

<script>
import baseFilterTable from '@/mixins/baseFilterTable'
import uploadFiles from '@/mixins/budgetQuert/uploadFiles'
import { listYsDepartmentPage, exportExcelYsDepartmentDemo, importExcelYsDepartment, exportExcelYsDepartment, removeYsDepartmentById, saveOrUpdateYsDepartment
} from '@/api/settings/department'

export default {
  name: 'Department', // 预算部门管理
  components: {},
  mixins: [baseFilterTable, uploadFiles],
  props: {},
  data() {
    return {
      collectSubjects: '', // 采集用友科目
      downloadTemplate: exportExcelYsDepartmentDemo, // 下载模板
      importFile: importExcelYsDepartment, // 导入
      exportFile: exportExcelYsDepartment, // 导出
      baseInfo: {
        searchBarShow: true
      },
      fileName: '预算部门管理.xlsx',
      tableData: [],
      tableEl: [
        {
          title: '部门名称',
          dataIndex: 'departmentName'
        },
        {
          title: '部门编码',
          dataIndex: 'departmentCode'
        },
        {
          title: '是否参与业务预算',
          dataIndex: 'status',
          type: 'otherTag'
        },
        {
          title: '是否参与管理预算',
          dataIndex: 'manageStatus',
          type: 'otherTag'
        },
        {
          title: '备注',
          dataIndex: 'remark'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          type: 'otherTag',
          align: 'center'
        }
      ],
      elements: [
        {
          label: '部门名称',
          type: 'input',
          key: 'departmentName',
          value: ''
        },
        {
          label: '部门编码',
          type: 'input',
          key: 'departmentCode',
          value: ''
        }
      ],
      departmentList: [], // 系统部门列表
      footerBtns: [
        {
          text: '保存',
          type: 'primary',
          loading: false,
          trigger: 'submit'
        },
        {
          text: '取消',
          type: 'info',
          trigger: 'cancel'
        }
      ],
      drawerForm: {
        status: false,
        manageStatus: false
      },
      drawerRules: {
        departmentName: [
          { required: true, message: '请输入部门名称', trigger: 'change' }
        ],
        departmentCode: [
          { required: true, message: '请输入部门编码', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择是否参与业务预算', trigger: 'change' }
        ],
        manageStatus: [
          { required: true, message: '请选择是否参与管理预算', trigger: 'change' }
        ]
      },
      isEdit: true,
      conditionsExport: {}, // 导出条件
      isBack: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    submit(val, isBack) {
      if (this.isBack) {
        this.pagination.current = 1
      }
      this.getData(val)
    },
    paginationChange(val) {
      this.isBack = false
      this.pagination.current = val?.current || this.pagination.current
      this.pagination.pageSize = val?.pageSize || this.pagination.pageSize
      this.$refs.filterForm.submitFormFilter()
    },
    getData(val) {
      this.conditionsExport = val
      const params = {
        num: this.pagination.current,
        size: this.pagination.pageSize,
        departmentName: val?.departmentName,
        departmentCode: val?.departmentCode
      }
      this.tableLoading = true
      listYsDepartmentPage(params).then(res => {
        this.tableLoading = false
        if (res.code === 200) {
          this.tableData = res.data.records
          this.pagination.total = res.data.total
        } else {
          this.$message.error(res.message)
        }
        this.isBack = true
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 新增
    drawerAdd() {
      this.drawerVisible = true
      this.isEdit = true
    },
    // 是否参与业务预算
    operating(row) {
      const params = {
        id: row.id,
        status: row.status,
        departmentCode: row.departmentCode
      }
      saveOrUpdateYsDepartment(params).then(res => {
        if (res.code === 200) {
          this.getData(this.searchParams)
          this.$message.success(res.message)
        } else {
          this.getData(this.searchParams)
          this.$message.error(res.message)
        }
      })
    },
    // 是否参与管理预算
    budget(row) {
      const params = {
        id: row.id,
        manageStatus: row.manageStatus,
        departmentCode: row.departmentCode
      }
      saveOrUpdateYsDepartment(params).then(res => {
        if (res.code === 200) {
          this.getData(this.searchParams)
          this.$message.success(res.message)
        } else {
          this.getData(this.searchParams)
          this.$message.error(res.message)
        }
      })
    },
    // 编辑
    editFun(row) {
      this.drawerVisible = true
      this.isEdit = false
      this.drawerForm = { ...row }
    },
    removeFun(item) {
      this.$confirm({
        content: '此操作将删除系统与用友的对照关系,并无法恢复, 是否继续?',
        title: '确认提示',
        okFn: () => {
          const params = {
            id: item.id
          }
          removeYsDepartmentById(params).then(res => {
            if (res.code === 200) {
              this.$message.success(res.message || '操作成功')
              this.$refs.filterForm.submitFormFilter()
            } else {
              this.$message.error(res.message || '操作失败')
            }
          })
        }
      })
    },
    // 抽屉 提交
    drawerSubmit() {
      this.$refs.drawerForm.validate((valid) => {
        if (valid) {
          this.footerBtns[0].loading = true
          const params = {
            deleteFlag: this.drawerForm.deleteFlag,
            departmentCode: this.drawerForm.departmentCode,
            departmentName: this.drawerForm.departmentName,
            id: this.drawerForm.id,
            remark: this.drawerForm.remark,
            status: this.drawerForm.status,
            manageStatus: this.drawerForm.manageStatus
          }
          saveOrUpdateYsDepartment(params).then(res => {
            this.footerBtns[0].loading = false
            if (res.code === 200) {
              this.getData(this.searchParams)
              this.drawerCancel()
              this.$message.success(res.message || '操作成功')
            } else {
              this.$message.error(res.message || '提交失败')
            }
          }).catch(() => {
            this.footerBtns[0].loading = false
          })
        }
      })
    },
    // 抽屉 关闭
    drawerCancel() {
      this.$refs.drawerForm.resetFields()
      this.drawerVisible = false
      this.drawerForm.id = ''
    }
  }
}
</script>

<style lang="less" scoped>
.table-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.red{
  color: #F56C6C;
}
/deep/.el-textarea__inner {
  min-height: 160px !important;
}
</style>
